<template>
	<view class="bg-white e-p-20 e-m-b-20" v-if="groupInfo">
		<view class="text-center e-m-b-40" v-if="type === 2">
			<text class="e-font-28 c-333" v-if="groupInfo.groupNum === groupInfo.nowNum">{{$t('spellgroup.groupsuccess')}}</text>
			<text v-else>{{$t('spellgroup.pleaseInvitatePeople')}}{{groupInfo.groupNum - groupInfo.nowNum}}{{$t('spellgroup.rct')}}</text>
		</view>
		<view v-else class="text-center e-m-b-40">
			<text>{{$t('spellgroup.hc')}}{{groupInfo.groupNum - groupInfo.nowNum}}{{$t('spellgroup.rct')}}</text>
			<text>，{{$t('spellgroup.paycansuccess')}}</text>
		</view>
		<view class="e-flex e-flex-around e-p-l-40 e-p-r-40">
			<view class="e-flex-column" v-for="(item, index) in groupInfo.headUrls" :key="index">
				<image v-if="item" class="raidus-image" :class="type === 1 ? 'img-64':'img-84'"  :src="$fullLink(item)" mode="aspectFit"></image>
				<image v-else class="raidus-image" :class="type === 1 ? 'img-64':'img-84'" :src="$staticPath('default-headerImg.png')" mode="aspectFit"></image>
				<image v-if="index === 0" class="group-header" :src="$staticPath('group-header.png')" mode=""></image>
			</view>
			<image v-for="item in parseInt(groupInfo.groupNum - groupInfo.nowNum)" :key="item" :class="type === 1 ? 'img-64':'img-84'" :src="$staticPath('spell-surplus.png')" mode=""></image>
		</view>
	</view>
	<view v-else class="e-p-40 h-320 e-flex e-flex-xy-center">
		<text class="e-font-28 c-666">{{$t('spellgroup.loading')}}</text>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: Number,
				default:1
			},
			groupInfo:Object,
			surplus: {
				type:Number,
				default: 2
			}
		}
	}
</script>

<style lang="scss" scoped>
	.group-header {
		width: 72rpx;
		height: 32rpx;
		margin-top: -10rpx;
	}
	
	.raidus-image {
		border-radius: 50%;
	}
	.h-320 {
		height: 310rpx;
	}
</style>